<template>
	
	<view class="container">
		<!-- 图片区 -->
		<view class="detail-img">
			<img class="detail-img-pic" :src="competition.activityImg"  />
		</view>
			
		<!-- 主题 -->
		<view class="detail-tital">
			<view class="detail-tital-left">
				<view class="detail-tital-name">
					{{competition.activityTitle}}
				</view>
				<view class="detail-people">
					{{competition.activityHasApplicationNum}}/{{competition.activityApplicationNum}}人报名 | 
					{{competition.activityApplicationBeginTime}}至{{competition.activityApplicationEndTime}}
				</view>
			</view>
			<!-- 是否已报名 -->
			<!-- 是否已报名 -->
			<view class="detail-tital-right" v-if="competition.activityApplicationDO!=null&&competition.activityApplicationDO.status==1">
				待审核
			</view>
			<view class="detail-tital-right" v-if="competition.activityApplicationDO!=null&&competition.activityApplicationDO.status==2">
				审核通过
			</view>
			<view class="detail-tital-right" v-if="competition.activityApplicationDO!=null&&competition.activityApplicationDO.status==3">
				审核拒绝
			</view>
			
		</view>
		<!-- 简介 -->
		<view class="detail-tital-intro">
			<view class="detail-tital-intro-name">
				活动主题描述
			</view>
			<view class="detail-tital-intro-detail">
				<uni-section >
					<uni-tooltip>
						<view class="detail-tital-intro-detail-text">{{competition.activityIntroduction}}</view>
						<template v-slot:content>
							<view class="uni-stat-tooltip">
								{{competition.activityIntroduction}}
							</view>
						</template>
					</uni-tooltip>
				</uni-section>
			</view>
		</view>
		<!-- 详情-->
		<view class="competition-detail">
			<view class="competition-detail-name">
				活动详情
			</view>
			<view class="competition-detail-detail">
				{{competition.activityDetail}}
				
			</view>
		</view>
		<view class="fixed-button" v-if="competition.activityApplicationDO==null">
			<uni-section >
				<view class="example-body box">
					<button class="button" type="primary" @click="toggle('bottom')"><text class="button-text">报名</text></button>
				</view>
			</uni-section>
		</view>
		<view  class="fixed-button" v-if="competition.activityApplicationDO!=null&&(competition.activityApplicationDO.status==2||competition.activityApplicationDO.status==1)">
			<uni-section>
				<view class="example-body box">
					<button class="button popup-warn" @click="dialogToggle('warn')">
						<text class="button-text warn-text">取消报名</text>
					</button>
				</view>
			</uni-section>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<uni-section title="个人信息" type="line">
						<view class="example">
							<!-- 基础表单校验 -->
							<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="80px">
								<uni-forms-item label="姓名" required name="name">
									<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名"  />
								</uni-forms-item>
								<uni-forms-item label="手机号" required name="tel">
									<uni-easyinput v-model="valiFormData.tel" placeholder="请输入手机号" />
								</uni-forms-item>
								
							</uni-forms>
							<button :disabled="isDisabled" type="primary" @click="submit('valiForm')">提交</button>
						</view>
					</uni-section>
				</view>
			</uni-popup>
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
		
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="否" confirmText="是" title="注意:" content="确定取消报名吗？" @confirm="dialogConfirm" @close="dialogClose">
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
	
	
</template>

<script >
	import { mapState} from 'vuex'
	export default {
		data() {
			return {
				// 请求参数对象
				queryObj: {
					// 大赛Id
					id: '',
				},
				
				// 基础表单数据
				
				//取消的id
				cancleData: {
					applicationId: 0,
				},
				competition: '',
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				// 校验表单数据
				valiFormData: {
					id: '',
					name: '',
					age: '',
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					tel: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}, {
							format: 'number',
							errorMessage: '手机号只能输入数字'
						}]
					}
				},
				//是否已经报名
				applicationActive: false,
				isDisabled: false,
			}
		},
		computed: {
			
		  ...mapState('m_user', ['userinfo']),
		  ...mapState('m_user', ['userId']),
		},
		onLoad(options) {
			this.baseUrl=uni.$http.baseUrl
			this.queryObj.id = options.id || ''
			this.valiFormData.id = options.id || ''
			this.valiFormData.name = this.userinfo.nickName
			const id = options.id
			console.log("======"+id)
			this.getCompetitionSignuping(id)
		},
		methods: {
			//报名中
			async getCompetitionSignuping(id){
				await uni.request({
				    url: this.baseUrl+'/api/activity/getActivityDetail', //仅为示例，并非真实接口地址。
				    data: {
				        // 学校Id
				        id: this.queryObj.id,
						userId: this.userId
				    },
					method: 'POST',
				    header: {
				          // "Content-Type": "application/json",
				          "Content-Type": "application/x-www-form-urlencoded"
				        },
				    success: (res) => {
						this.competition=res.data.data
						this.cancleData.applicationId=0
						if(this.competition.activityApplicationDO!=null){
							this.cancleData.applicationId=this.competition.activityApplicationDO.id;
							this.applicationActive=true
						}else{
							this.applicationActive=false
						}
				    },
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			},
			//提交报名信息
			async submitCompetition(){
				await uni.request({
				    url: this.baseUrl+'/api/activity/activityApplication', //仅为示例，并非真实接口地址。
				    data: {
				        // 大赛Id
				        activityId: this.valiFormData.id,
						name: this.valiFormData.name,
						mobile: this.valiFormData.tel,
						createUser: this.userId
				    },
					method: 'POST',
				    header: {
				        "Content-Type": "application/json",
				         // "Content-Type": "application/x-www-form-urlencoded"
				    },
				    success: (res) => {
						console.log(res.data)
						if(res.data.code==200){
							uni.showToast({
								title: `报名成功`
							})
							this.isDisabled=true
							this.getCompetitionSignuping(this.valiFormData.id)
							this.$refs.popup.close()
						}else{
							let failMsg="报名失败";
							 if(res.data.msg!=""){
								 failMsg=res.data.msg;
							}
							uni.showToast({
								title: failMsg,
								icon: 'error',
							})
						}
						
				    },
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			},
			//取消报名
			async cancleCompetition(){
				await uni.request({
				    url: this.baseUrl+'/api/activity/cancelActivityApplication', //仅为示例，并非真实接口地址。
				    data: {
				        // 报名表中的Id
				        id: this.cancleData.applicationId,
				    },
					method: 'POST',
				    header: {
				       // "Content-Type": "application/json",
				        "Content-Type": "application/x-www-form-urlencoded"
				    },
				    success: (res) => {
						console.log(res.data)
						if(res.data.code==200){
							uni.showToast({
								title: `取消成功`
							})
							this.getCompetitionSignuping(this.valiFormData.id)
							//取消报名之后，提交的按钮就可以点了
							this.isDisabled=false
						}else{
							uni.showToast({
								title: `取消失败`,
								icon: 'error',
							})
						}
						
				    },
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			
			dialogConfirm() {
				console.log('点击确认')
				this.cancleCompetition()
				//this.$refs.message.open()
			},
			
			dialogClose() {
				console.log('点击关闭')
			},
			submit(ref) {
				console.log(this.valiFormData);
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					this.valiFormData.name=res.name
					this.valiFormData.tel=res.tel
					console.log(this.valiFormData);
				}).catch(err => {
					console.log('err', err);
				})
				this.submitCompetition()
			},
		}
	}
</script>

<style lang="scss">
.container{
	 padding-bottom: 120rpx; /* 保证内容不会被按钮遮挡 */
	.detail-img{
		height: 200px;
		.detail-img-pic{
			width: 100%;
			height: 100%;
		}
	}
	.detail-tital{
		background-color: white;
		height: 50px;
		margin-top: 20px;
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.detail-tital-left{
			width: 85%;
			display: flex;
			flex-direction: column;
			.detail-tital-name{
				font-size: 18px;
			}
			.detail-people{
				font-size: 14px;
				padding-top: 8px;
				color: #939393;
			}
		}
		.detail-tital-right{
			
			width: 15%;
		}
		
	}
	.detail-tital-intro{
		margin-top: 10px;
		padding: 10px;
		height: 80px;
		background-color: white;
		.detail-tital-intro-name{
			font-size: 18px;
		}
		.detail-tital-intro-detail{
			font-size: 14px;
			.uni-section .uni-section-header{
				padding: 0;
			}
			padding-top: 10px;
			.detail-tital-intro-detail-text{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height:50rpx
			}
			.uni-stat-tooltip {
				width: 300px;
			}
			
		}
	}
	.competition-detail{
		margin-top: 10px;
		padding: 10px;
		background-color: white;
		.competition-detail-name{
			font-size: 18px;
		}
		.competition-detail-detail{
			font-size: 14px;
			padding-top: 8px;
			/* 设置样式以保留换行 */
			white-space: pre-wrap;
			line-height:50rpx
		}
	}
	
	.fixed-button{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box; /* 防止padding影响宽度 */
		padding: 10px;
		background-color: white;
		.uni-section .uni-section-header{
			padding: 5px;
		}
	}
}
@mixin flex {
	display: flex;
}

.button {
	@include flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 35px;
	margin: 0 5px;
	border-radius: 5px;
	background-color: #f56d12;
	
}
.popup-content {
	@include flex;
	justify-content: center;
	padding: 15px 0px;
	background-color: #fff;
}

</style>
